<script setup lang="ts">
import { ref } from "vue";
const tableData = ref([
  {
    name: '华为笔记本电脑',
    TypeId: 'Mate book 15D',
    unit: '个',
    number: "45",
    money: "13000"
  },
  {
    name: '华为笔记本电脑',
    TypeId: 'Mate book 15D',
    unit: '个',
    number: "45",
    money: "13000"
  },
  {
    name: '华为笔记本电脑',
    TypeId: 'Mate book 15D',
    unit: '个',
    number: "45",
    money: "13000"
  },
  {
    name: '华为笔记本电脑',
    TypeId: 'Mate book 15D',
    unit: '个',
    number: "45",
    money: "13000"
  },
  {
    name: '华为笔记本电脑',
    TypeId: 'Mate book 15D',
    unit: '个',
    number: "45",
    money: "13000"
  },
  {
    name: '华为笔记本电脑',
    TypeId: 'Mate book 15D',
    unit: '个',
    number: "45",
    money: "13000"
  }
])


import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const OptionPie1 = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['退货数量', '退货金额']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六', '商品七 ', '商品八']
  },
  yAxis: {
    type: 'value',
    title: "金额 (元)"
  },
  series: [
    {
      name: '退货数量',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '退货金额',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
  ],
});
</script>

<template>
  <div class="_caigou">
    <div class="_none">
      <span>
        重复的 html&css 省略不写...
      </span>
    </div>
    <div class="bottom_box">
      <div class="_left _style_box">
        <span>采购商品金额排行</span>
        <el-table header-row-class-name="_table_row" :data="tableData"
          style="border: 1px solid #eee;margin-top: 15px;border-radius: 15px;">
          <el-table-column prop="name" label="产品名" />
          <el-table-column prop="TypeId" label="规格型号" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="number" label="采购数量" />
          <el-table-column prop="money" label="采购金额
           (元)">
          </el-table-column>
        </el-table>
      </div>
      <div class="_right _style_box">
        <span>采购商品金额排行</span>
        <v-chart class="pie_chart" :option="OptionPie1" autoresize />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
._none {
  width: 100%;
  height: 400px;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: medium;
}



.bottom_box {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30px;

  ._style_box {
    width: calc(47%);
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
  }

  ._right {
    width: calc(44%);
    .pie_chart {
      width: calc(100%);
    }
  }

  ._left {

    :deep(.el-table_5_column_25) {
      .cell {
        color: #F59A23;
      }
    }

    :deep(.cell) {
      font-size: 11px;
    }

    :deep(._table_row) {
      background-color: #F7F8FE;

      .cell {
        color: #999;
      }
    }
  }
}
</style>